{% comment %}
	@param {string} type - 'page' | 'post' | 'keynote' | 'inaccessible_page'
	@param {boolean} short
{% endcomment %}

{% if include.type == 'post' %}
<style type="text/css">
	header.intro-header{
		position: relative;
		background-image: url('{{ site.baseurl }}/{% if page.header-img %}{% if page.header-img != "none" %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}{% else %}{{ page.date | date: "img/post-bg/%Y/%m-%d-%H.jpg" }}{% endif %}');
		background: {{ page.header-bg-css }};
	}

	{% if page.header-mask %}
	header.intro-header .header-mask{
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgba(0,0,0, {{ page.header-mask }});
	}
	{% endif %}
</style>
{% if page.header-style == 'text' %}
<header class="intro-header style-text" >
{% else %}
<header class="intro-header" >
{% endif %}
	<div class="header-mask"></div>
	{% if page.header-img-credit %}
	<div class="header-img-credit">
		Image by <a href="//{{page.header-img-credit-href}}">{{page.header-img-credit}}</a>
	</div>
	{% endif %}
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
				<div class="post-heading">
					<div class="tags">
						{% for tag in page.tags %}
						<a class="tag" href="{{ site.baseurl }}/archive/?tag={{ tag | url_encode }}" title="{{ tag }}">{{ tag }}</a>
						{% endfor %}
					</div>
					<h1>{{ page.title }}</h1>
					{% comment %} always create a h2 for keeping the margin {% endcomment %}
					<h2 class="subheading">{{ page.subtitle }}</h2>
					<span class="meta">Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %} on {{ page.date | date: "%B %-d, %Y" }}</span>
				</div>
			</div>
		</div>
	</div>
</header>
{% endif %}

{% if include.type == 'keynote' %}
<style type="text/css">
	header.intro-header{
		height: 500px;
		overflow: hidden;
	}
	header.intro-header .container{
		visibility: hidden; 
	}
	header iframe{
		width: 100%;
		height: 100%;
		border: 0;
	}
</style>
<header class="intro-header" >
	<iframe src="{{page.iframe}}"></iframe>
	<!-- keep for SEO -->
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
				<div class="post-heading">
					<div class="tags">
						{% for tag in page.tags %}
						<a class="tag" href="{{ site.baseurl }}/archive/?tag={{ tag | url_encode }}" title="{{ tag }}">{{ tag }}</a>
						{% endfor %}
					</div>
					<h1>{{ page.title }}</h1>
					{% comment %} always create a h2 for keeping the margin {% endcomment %}
					<h2 class="subheading">{{ page.subtitle }}</h2>
					<span class="meta">Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %}
						on {{ page.date | date: "%B %-d, %Y" }}</span>
				</div>
			</div>
		</div>
	</div>
</header>
{% endif %}

{% if include.type == 'page' %}
<header class="intro-header" style="background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')">
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
				{% if include.short %}
				<div class="site-heading" id="tag-heading">
				{% else %}
				<div class="site-heading">
				{% endif %}
					<h1>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</h1>
					<span class="subheading">{{ page.description }}</span>
				</div>
			</div>
		</div>
	</div>
</header>
{% endif %}

{% if include.type == 'inaccessible_page' %}
<header class="intro-header" style="background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}')">
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
				{% if include.short %}
				<div class="site-heading" id="tag-heading">
				{% else %}
				<div class="site-heading">
				{% endif %}
					<h1>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</h1>
					<span class="subheading">
					<div>
						{{ page.description }}
						<br>
						<a href="javascript:history.go(-1)">返回</a>
					</div>
					</span>
				</div>
			</div>
		</div>
	</div>
</header>
{% endif %}